/**
 * 类型定义文件 - types/index.ts
 * 这个文件定义了整个项目中使用的数据结构
 * 就像是建筑图纸，规定了每种数据应该包含哪些信息
 */

/**
 * 组件类型定义
 * 定义了画布上每个组件的基本结构
 * 每个组件都必须包含这些基本信息
 */
export interface Component {
  id: string              // 组件的唯一标识符，就像身份证号
  type: ComponentType     // 组件类型（图表、文本、图片等）
  name: string           // 组件名称，用户可以自定义
  style: ComponentStyle  // 组件的样式信息（位置、大小、颜色等）
  config: ComponentConfig // 组件的配置信息（具体内容设置）
  data?: any             // 组件的数据（可选，用于图表等需要数据的组件）
}

/**
 * 组件类型枚举
 * 定义了系统支持的所有组件类型
 * 新增组件类型时需要在这里添加
 */
export enum ComponentType {
  BAR_CHART = 'bar-chart',    // 柱状图
  LINE_CHART = 'line-chart',  // 折线图
  PIE_CHART = 'pie-chart',    // 饼图
  RADAR_CHART = 'radar-chart', // 雷达图
  TEXT = 'text',              // 文本组件
  IMAGE = 'image',            // 图片组件
  BORDER = 'border'           // 边框组件
}

/**
 * 组件样式定义
 * 控制组件在画布上的外观和位置
 */
export interface ComponentStyle {
  left: number           // X坐标：组件距离画布左边的距离（像素）
  top: number            // Y坐标：组件距离画布顶部的距离（像素）
  width: number          // 宽度：组件的宽度（像素）
  height: number         // 高度：组件的高度（像素）
  zIndex: number         // 层级：数值越大显示越靠前
  opacity: number        // 透明度：0-1之间，1为完全不透明
  rotate: number         // 旋转角度：-360到360度
  borderRadius: number   // 圆角：控制组件边角的圆润程度
  backgroundColor?: string // 背景颜色（可选）
  border?: string        // 边框样式（可选）
}

/**
 * 组件配置定义
 * 存储不同类型组件的特有设置
 * 问号(?)表示该属性是可选的
 */
export interface ComponentConfig {
  // 图表相关配置
  chartOption?: any      // 图表的详细配置（ECharts配置对象）
  
  // 文本相关配置
  text?: string          // 文本内容
  fontSize?: number      // 字体大小（像素）
  fontColor?: string     // 字体颜色
  fontWeight?: string    // 字体粗细（normal、bold等）
  textAlign?: 'left' | 'center' | 'right'  // 文本对齐方式
  
  // 图片相关配置
  src?: string           // 图片地址（URL）
  objectFit?: 'fill' | 'contain' | 'cover' | 'scale-down' | 'none'  // 图片适应方式
  
  // 边框相关配置
  borderType?: string    // 边框类型（solid、dashed等）
  borderWidth?: number   // 边框宽度（像素）
  borderColor?: string   // 边框颜色
}

/**
 * 组件模板定义
 * 用于定义组件库中每种组件的默认设置
 * 当用户添加新组件时，会使用这些默认值
 */
export interface ComponentTemplate {
  type: ComponentType        // 组件类型
  name: string              // 组件显示名称
  icon: string              // 组件图标（用于组件面板显示）
  defaultStyle: ComponentStyle   // 默认样式设置
  defaultConfig: ComponentConfig // 默认配置设置
}

/**
 * 拖拽事件数据定义
 * 当用户拖拽组件到画布时传递的数据
 */
export interface DragData {
  type: ComponentType       // 被拖拽的组件类型
  template: ComponentTemplate // 组件模板信息
}